import React, {useEffect, useState} from 'react';
import {createFromIconfontCN} from '@ant-design/icons';
import styles from './index.less';
import screenfull from 'screenfull';
import {message} from 'antd';
import {createIconUtl} from "@/utls/iconfont/create-icon.utl";

const FullScreen = () => {
    const [fullScreen, setFullScreen] = useState<boolean>(false);
    const IconFont = createFromIconfontCN({scriptUrl: '/iconfont/iconfont.js'})
    const entryOrOutFullScreen = () => {
        if (!screenfull.isEnabled) {
            message.warning('当前您的浏览器不支持全屏 ❌');
        }
        screenfull.toggle().then();
    };
    useEffect(() => {
        screenfull.on('change', () => {
            if (screenfull.isFullscreen) setFullScreen(true);
            else setFullScreen(false);
            return () => screenfull.off('change', () => {
            });
        });
    }, []);
    return <div onClick={entryOrOutFullScreen} className={`${styles['full-screen-container']} iconfont-size`}>
        {fullScreen ? createIconUtl('icon-quxiaoquanping_o') : createIconUtl('icon-quanping_o')}
    </div>;
};
export default FullScreen;
